<script>
	import { fade, fly, slide, blur, scale, draw } from 'svelte/transition';
	import { flip } from 'svelte/animate';
	import { quintOut, cubicOut } from 'svelte/easing';

	export let condition = true;

	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
	let i = 5;
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
		};
	}
</script>

<div
	class="relative grid items-center justify-center w-full h-full gap-5 p-5 my-5 text-3xl text-purple-400 "
>
	<input type="checkbox" bind:checked={condition} class="absolute m-5 " />
	{#if condition}
		<div transition:fade|local={{ delay: 250, duration: 1500 }}>transition:fade</div>
		<div transition:blur|local={{ amount: 10, duration: 1500 }}>transition:blur</div>
		<div
			transition:fly|local={{ delay: 550, duration: 1500, x: 500, opacity: 0.5, easing: quintOut }}
		>
			transition:fly
		</div>
		<div transition:slide|local={{ delay: 850, duration: 1500, easing: quintOut }}>
			transition:slide
		</div>
		<div
			transition:scale|local={{
				duration: 1050,
				delay: 500,
				opacity: 0.5,
				start: 0.5,
				easing: quintOut
			}}
		>
			transition:scale
		</div>
		<div>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5">
				<path
					transition:draw|local={{ duration: 1000, delay: 2000, easing: quintOut }}
					d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
					fill="none"
					stroke="cornflowerblue"
					stroke-width="0.1px"
					stroke-linejoin="round"
				/>
			</svg>
		</div>
	{/if}
</div>
